<template>
  <div class="wave">
    <div class="wave1"></div>
    <div class="wave2"></div>
  </div>
</template>

<style lang="less" scoped>
.wave {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  top: 230px;
  overflow: hidden;
  // background-color: red;

  .wave1,
  .wave2 {
    position: absolute;
    width: 200%;
    /* 增加宽度以实现平滑滚动 */
    background-size: 50% 100%;
    background-repeat: repeat-x;
    animation: wave-animation 30s linear infinite;
  }

  .wave1 {
    bottom: 0;
    height: 85px;
    background-image: url(../static/imgs/images/wave1.png);

  }

  .wave2 {
    bottom: 0px;
    height: 100px;
    background-image: url(../static/imgs/images/wave2.png);
    /* 反向移动，增加层次感 */
    animation-direction: reverse;
  }
}

@keyframes wave-animation {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
</style>
